import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Button, Icon, Modal, Bubble, Tools } from 'weaver-mobile';
import { RouteLayout } from 'weaver-mobile-page';

import TableList from '../setting/tableList';
import { TitleUtil } from '../../util';

const noop = () => { }
const { alert, prompt } = Modal;
const { getLabel } = Tools;

@inject('contactStore')
@inject('groupSettingStore')
@withRouter
@observer
export default class GroupSetting extends Component {

  prefixCls = 'email-group-setting';

  componentDidMount() {
    window.isUmount = false;
    TitleUtil.setTitle(getLabel('34105','分组设置'));
  }

  componentWillUnmount() {
    window.isUmount = true;
    this.props.contactStore.getContactCountList(false);
    TitleUtil.resetEmElement();
    if (this.modal && typeof this.modal.close === 'function') this.modal.close();
  }

  doAddGroup = () => {
    const { groupSettingStore } = this.props;
    this.modal = prompt(getLabel('30131', '新建分组'), '', [
      { text: getLabel('31129', '取消') },
      { text: getLabel('826', '确定'), onPress: value => new Promise((resolve, reject) => {
        if (value.trim()) {
          groupSettingStore.handleOperation({
            operation: 'addOrThenMoveOrCopy',
            groupName: value.trim(),
          });
          resolve()
        } else {
          Bubble.error(getLabel('384379', '您还有必填信息未填'), 1, { top: '50%' });
          // reject();
        }
      })},
    ], 'text-required', undefined, [getLabel('386928','请输入分组名称')]);
  }

  doEdit = (params) => {
    const { groupSettingStore } = this.props;
    const { data: { mailGroupName, randomFieldId } } = params;
    this.modal = prompt(getLabel('83149', '编辑分组'), '', [
      { text: getLabel('31129', '取消') },
      { text: getLabel('826', '确定'), onPress: value => new Promise((resolve, reject) => {
        if (value) {
          groupSettingStore.handleOperation({
            operation: 'updateGroupName',
            groupName: value,
            groupId: randomFieldId,
          });
          resolve();
        } else {
          Bubble.error(getLabel('384379', '您还有必填信息未填'), 1, { top: '50%' });
          reject();
        }
      })},
    ], 'text-required', mailGroupName, [getLabel('386928','请输入分组名称')]);
  }

  doDel = (params) => {
    const { groupSettingStore } = this.props;
    const { data: { randomFieldId } } = params;
    this.modal = alert(getLabel('500265', '删除后，分组下所有人员将从此分组列表中移除'), '', [
      { text: getLabel('31129', '取消') },
      { text: getLabel('826', '确定'), onPress: () =>
        groupSettingStore.handleOperation({
          operation: 'deleteGroup',
          groupId: randomFieldId,
        })
      },
    ]);
  }

  renderTitle = (data) => {
    return (
      <span>{data.mailGroupName}</span>
    );
  }

  renderOps = (o, check, data) => {
    const index = Number(o.index);
    let handler = noop;
    let icon = '';
    if (o.index * 1 === 0) {
      handler = this.doEdit;
      icon = 'bianji';
    } else if (o.index * 1 === 1) {
      handler = this.doDel;
      icon = 'delete';
    }
    return (
      <span
        onClick={() => handler({ params: check[`randomFieldOpPara${index}`], data })}
        key={o.index}
        style={{ marginRight: 5 }}
      >
        {icon && <Icon type={icon}/>}
        {o.text}
      </span>
    );
  }

  render() {
    const { groupSettingStore: { tableListStore } } = this.props;
    return (
      <RouteLayout>
        <div className={`${this.prefixCls} wm-route-layout`} key="groupSetting">
          <Button className="btn-add" icon="open" onClick={this.doAddGroup}>{getLabel('30131', '新建分组')}</Button>
          <TableList store={tableListStore} renderTitle={this.renderTitle} renderOps={this.renderOps}/>
        </div>
      </RouteLayout>
    );
  }
}
